<template>
  <div class="page-content">
    <!-- 搜索栏组件 -->
    <SearchBar @getDataByKeyword="getDataByKeyword"></SearchBar>

    <!-- 表格区域 -->
    <!-- 表格功能区 -->
    <div style="height: 20px; width: 100%"></div>
    <TableBar
      :columns="columns"
      @changeColumn="changeColumn"
      :layout="layout"
    >
      <el-row slot="bottom" :gutter="20">
        <el-col :span="6"
          ><el-button
            plain
            size="mini"
            type="primary"
            @click="tableAdd_visible = true"
            v-auth="'breed_product_insert'"
            >新增</el-button
          ></el-col
        >
        <el-col :span="6"
          ><el-button
            plain
            size="mini"
            type="danger"
            @click="delDataBySelectBox"
            v-auth="'breed_product_delete'"
            >删除</el-button
          ></el-col
        >
        <el-col :span="6"
          ><el-tooltip
            effect="dark"
            content="导入产品信息"
            placement="top-start"
            ><el-upload
              action="http://120.77.156.205:9603/breed/product/excel"
              :show-file-list="false"
              name="multipartFile"
              :on-success="uploadSuccess"
              ><el-button
                type="primary"
                class="el-icon-upload el-icon--right"
                size="small"
                >信息导入</el-button
              ></el-upload
            ></el-tooltip
          ></el-col
        >
        <el-col :span="6"
          ><el-button type="primary" size="small" @click="downLoadExcel" v-auth="'breed_product_select'"
            >导出</el-button
          ></el-col
        >
      </el-row>
    </TableBar>
    <!-- 表格数据 -->
    <ReportTable
      :data="data"
      :page="page"
      :showPage="showPage"
      @changeSize="changeSize"
      @changePage="changePage"
      :Bottom="35"
      @getDataBySelectBox="getDataBySelectBox"
    >
      <el-table-column
        :label="columns[0].name"
        v-if="columns[0].show"
        prop="skuNumber"
        width="100"
      ></el-table-column>
      <el-table-column
        :label="columns[1].name"
        v-if="columns[1].show"
        prop="name"
        width="150"
      ></el-table-column>
      <el-table-column
        :label="columns[2].name"
        v-if="columns[2].show"
        prop="species"
        width="150"
      ></el-table-column>
      <el-table-column
        :label="columns[3].name"
        v-if="columns[3].show"
        prop="specification"
        width="100"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.specification }}g/只</span>
        </template>
      </el-table-column>
      <el-table-column
        :label="columns[4].name"
        v-if="columns[4].show"
        prop="onShelf"
        width="100"
      >
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.onShelf == '1'">上架</el-tag>
          <el-tag type="danger" v-else>下架</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        :label="columns[5].name"
        v-if="columns[5].show"
        prop="baseName"
        width="150"
      >
      </el-table-column>
      <el-table-column
        :label="columns[6].name"
        v-if="columns[6].show"
        prop="principalName"
        width="120"
      >
      </el-table-column>
      <el-table-column
        :label="columns[7].name"
        v-if="columns[7].show"
        prop="grade"
        width="160"
      >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.grade == '1'">一等品</el-tag>
          <el-tag v-else-if="scope.row.grade == '2'">二等品</el-tag>
          <el-tag v-else>三等品</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        :label="columns[8].name"
        v-if="columns[8].show"
        prop="packageType"
        width="160"
      >
      </el-table-column>
      <el-table-column
        :label="columns[9].name"
        v-if="columns[9].show"
        prop="unitPrice"
        width="160"
      >
      </el-table-column>
      <el-table-column
        :label="columns[10].name"
        v-if="columns[10].show"
        width="250"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-tooltip effect="dark" content="溯源二维码" placement="top-start">
            <el-button
              type="success"
              size="mini"
              class="el-icon-full-screen"
              @click="expandQrCode(scope.row.qrCode)"
            ></el-button>
          </el-tooltip>
          <el-button size="mini" type="primary" @click="tableEdit(scope.row)" v-auth="'breed_product_update'"
            >编辑</el-button
          >
          <el-button size="mini" type="danger" @click="tableDelete(scope.row)" v-auth= "'breed_product_delete'"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </ReportTable>
    <ProductManageEditForm
      v-show="tableEdit_visible"
      @getNewProduct="getProduction"
      :editForm="editForm"
      :tableEdit_visible="tableEdit_visible"
      @closeEditDialog="closeEditDialog"
    ></ProductManageEditForm>
    <ProductManageAddForm
      v-show="tableAdd_visible"
      @getNewProduct="getProduction"
      :tableAdd_visible="tableAdd_visible"
      @closeAddDialog="closeAddDialog"
    ></ProductManageAddForm>
    <!-- 二维码图 -->
    <el-dialog title="产品二维码" :visible.sync="picDialogVisible" width="31%">
      <div class="demo-image__preview">
        <el-image :lazy="true" :src="qrCodePic" :preview-src-list="srcList">
        </el-image>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 搜索栏
import SearchBar from "@/components/ProductionManagement/ProductManage/SearchBar";
// 表格上方功能栏
import OperationTableBar from "@/components/ProductionManagement/ProductManage/OperationTableBar";
// 表格
import ReportTable from "@/components/ProductionManagement/TestReport/ReportTable";
// 表格编辑表单弹窗
import ProductManageEditForm from "../../components/ProductionManagement/ProductManage/editForm";
// 表格新建表单弹窗
import ProductManageAddForm from "@/components/ProductionManagement/ProductManage/addForm";
// 接口数据
import {
  getProduct,
  removeProduct,
  removeProducts,
  getProductByKeyword,
} from "../../Api/productionmanage/ProductManage";

export default {
  // 1. name
  // 2. components
  // 3. props
  // 4. data
  // 5. computed
  // 6. watch
  // 7. created
  // 8. mounted
  // 9. update
  // 10. beforeRouteUpdate
  // 11. methods
  name: "ProductManage",
  components: {
    SearchBar,
    OperationTableBar,
    ReportTable,
    ProductManageEditForm,
    ProductManageAddForm,
  },
  data() {
    return {
      showPage: true,
      // 存放请求回来的数据
      data: [],
      // 表头
      columns: [
        // 表头
        {
          name: "SKU编号",
          show: true,
        },
        {
          name: "产品名",
          show: true,
        },
        {
          name: "产品种类",
          show: true,
        },
        {
          name: "规格",
          show: true,
        },
        {
          name: "是否上架",
          show: true,
        },
        {
          name: "基地名称",
          show: true,
        },
        {
          name: "负责人",
          show: true,
        },
        {
          name: "产品等级",
          show: true,
        },
        {
          name: "包装类型",
          show: true,
        },
        {
          name: "单价",
          show: true,
        },
        {
          name: "操作",
          show: true,
        },
      ],
      // 表格编辑表单显示与隐藏
      tableEdit_visible: false,
      tableAdd_visible: false,
      reportPic_visible: false,
      picDialogVisible: false,
      editForm: {},
      // 传递给TheTable的数据
      page: {
        total: 0,
        pageSize: 10,
        current: 1,
      },
      // 表格选中框
      idBySelectBox: [],
      srcList: [],
      qrCodePic: "",
      // 表头右侧 即TableBar右侧要显示的功能按钮
      layout: "search, refresh, column",
    };
  },

  created() {
    this.getProduction();
  },
  mounted() {},
  methods: {
    // 分页获取产品数据
    async getProduction() {
      const { data: res } = await getProduct(
        this.page.current,
        this.page.pageSize
      );
      console.log(res);
      if (res.statusCode == 20000) {
        this.data = res.data.records;
        this.page.total = res.data.total;
      } else {
        this.$message.error("查询产品信息失败");
      }
    },
    // 搜索栏关键词查询数据
    async searchByKeyword(w) {
      // console.log(w);
      const { data: res } = await getProductByKeyword(
        this.page.current,
        this.page.pageSize,
        w
      );
      if (res.statusCode === 20000) {
        // console.log(res)
        if (res.data) {
          this.data = res.data.records;
          this.page.total = parseInt(res.data.total);
          this.$message.success("查询产品信息成功");
        } else {
          this.$message.error("搜索结果为空");
        }
      } else {
        return this.$message.error("查询产品信息失败");
      }
    },
    // 删除单个产品
    async tableDelete(a) {
      const confirmResult = await this.$confirm(
        "此操作将永久删除该产品, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => {
        return err;
      });
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消删除");
      }
      const { data: res } = await removeProduct(a.id);
      if (res.statusCode == 20000) {
        this.$message.success("已成功删除该产品");
        this.getProduction();
      } else {
        this.$message.error("删除该产品失败");
      }
    },
    // 通过表格选择 box 批量删除产品
    async delDataBySelectBox() {
      console.log(this.idBySelectBox);
      const confirmResult = await this.$confirm(
        "此操作将永久删除所选产品, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => {
        return err;
      });
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消删除");
      }
      const { data: res } = await removeProducts(this.idBySelectBox);
      if (res.statusCode == 20000) {
        this.$message.success("已成功删除选中的产品");
        this.getProduction();
      } else {
        console.log(res);
        this.$message.error("删除该产品失败");
      }
    },
    // 导入Excel
    uploadSuccess(res) {
      if (res.statusCode === 20000) {
        this.$message.success("导入Excel表格数据成功！");
        this.getProduction();
      } else {
        this.$message.error("导入出错，原因：" + res.message);
      }
    },
    // 导出Excel
    downLoadExcel() {
      let name = "产品信息";
      window.location.href = `http://120.77.156.205:9603/breed/product/${name}`;
    },
    getDataByKeyword(w) {
      // console.log(w)
      if (w == "") {
        this.getProduction();
      } else {
        this.searchByKeyword(w);
      }
    },
    getDataBySelectBox(w) {
      console.log(w);
      if (w.length == 0) {
        this.getProduction();
      } else {
        let arr = [];
        for (let i = 0; i < w.length; i++) {
          arr.push(w[i].id);
        }
        // console.log(arr);
        this.idBySelectBox = arr;
        console.log(this.idBySelectBox);
      }
    },

    // 点击 展开 控制搜索栏展示与隐藏
    showSearchBar() {
      // console.log(this.searchBar_visible);
      this.searchBar_visible = !this.searchBar_visible;
      // console.log(this.searchBar_visible);
    },
    // 点击表格编辑按钮,传值到表单
    tableEdit(a) {
      this.editForm = a;
      this.tableEdit_visible = true;
    },
    // 表格编辑表单弹窗隐藏
    closeEditDialog(a) {
      this.tableEdit_visible = a;
    },
    closeAddDialog(a) {
      this.tableAdd_visible = a;
    },
    // 选择显示隐藏列
    changeColumn(newcolumns) {
      this.columns = newcolumns;
    },
    // 分页 改变页码
    changePage(a) {
      this.page.current = a.current;
      this.getProduction();
    },
    // 分页 改变每页显示的条数
    changeSize(a) {
      this.page.pageSize = a.pageSize;
      this.getProduction();
    },
    expandQrCode(url) {
      this.qrCodePic = url;
      this.srcList.push(url);
      this.picDialogVisible = true;
    },
  },
};
</script>

<style>
.search-bar-top {
  border-bottom: 1px solid #999;
  background-color: #f8f8f9;
}

.search-bar-title {
  font-size: 14px;
  text-shadow: 1px 1px rgb(194, 191, 191);
  line-height: 30px;
  width: 100%;
  padding-left: 5px;
  cursor: default;
}

.search-bar-show {
  font-size: 12px;
  line-height: 30px;
  color: #999;
  cursor: pointer;
}
.demo-image__preview {
  width: 100%;
  /* background-color: #409eff; */
}
</style>
